<nz-card>
  <div nz-row nzJustify="start">
    <button
      nz-button
      nzType="primary"
      [nzLoading]="submitLoading"
      (click)="submitData()"
    >保存</button>

    <button
      nz-button
      nzType="primary"
      class="mbtn-green m-l-10"
      (click)="showMoreGoodsModal()"
    >选择更多商品</button>
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="pagination-wrap-position">
    <nz-table
      #basicTable
      nzSize="small"
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzShowPagination]="false"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="partsLoading"
      [nzData]="partsTableData"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="80px" nzLeft>序号</th>
          <th nzAlign="center" nzWidth="120px">商品ID</th>
          <th nzAlign="left" nzWidth="420px">商品名称</th>
          <th nzAlign="center" nzWidth="150px">商品短名称</th>
          <th nzAlign="center" nzWidth="150px">商品分类</th>
          <th nzAlign="center" nzWidth="120px">商品库存</th>
          <th nzAlign="center" nzWidth="120px">商品图片</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="120px">B端单价</th>
          <th nzAlign="center" nzWidth="120px">C端单价</th>
          <th nzAlign="center" nzWidth="120px">适用用户</th>
          <th nzAlign="center" nzWidth="120px">标签颜色</th>
          <th nzAlign="center" nzWidth="240px">推荐标签</th>
          <th nzAlign="center" nzWidth="120px">固定位置</th>
          <th nzAlign="center" nzWidth="130px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 序号 -->
          <td nzAlign="center" nzLeft>{{ index + 1 }}</td>
          <!-- 商品ID -->
          <td nzAlign="center">{{ data.goodsId }}</td>
          <!-- 商品名称 -->
          <td nzAlign="left">{{ data.name || '-' }}</td>
          <!-- 商品短名称 -->
          <td nzAlign="center">{{ data.shortName || '-' }}</td>
          <!-- 商品分类 -->
          <td nzAlign="center">{{ data.goodsType || '-' }}</td>
          <!-- 商品库存 -->
          <td nzAlign="center">{{ data.stockNum || '0' }}</td>
          <!-- 商品图片 -->
          <td nzAlign="center">
            <img
              nz-image
              width="42px"
              height="42px"
              [nzSrc]="data.icon"
              alt=""
            />
          </td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.recommendStatus === 1 ? '#67C23A' : '#F56C6C'}">
              {{ data.recommendStatus === 1 ? '上架' : data.recommendStatus === 0 ? '下架' : '-' }}
            </span>
          </td>
          <!-- B端单价 -->
          <td nzAlign="center">￥{{ data.priceB || '-' }}</td>
          <!-- C端单价 -->
          <td nzAlign="center">￥{{ data.priceC || '-' }}</td>
          <!-- 适用用户 -->
          <td nzAlign="center">
            <ng-container [ngSwitch]="data.userType">
              <nz-tag *ngSwitchCase="0">通用</nz-tag>
              <nz-tag nzColor="#87d068" *ngSwitchCase="1">C端</nz-tag>
              <nz-tag nzColor="#2db7f5" *ngSwitchCase="2">B端</nz-tag>
              <span *ngSwitchDefault>-</span>
            </ng-container>
          </td>
          <!-- 标签颜色 -->
          <td nzAlign="center">
            <input
              nz-input
              type="color"
              nzBorderless
              [(ngModel)]="data.labelColor"
            />
          </td>
          <!-- 推荐标签 -->
          <td nzAlign="center">
            <input
              nz-input
              maxlength="4"
              placeholder="请输入"
              [(ngModel)]="data.labelText"
            />
          </td>
          <!-- 固定位置 -->
          <td nzAlign="center">
            <nz-input-number
              [nzMin]="0"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="data.sort"
            ></nz-input-number>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除?"
              (nzOnConfirm)="deletePartsItem(data)"
            >删除</button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>

<!-- S 选择更多商品 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1200"
  [nzFooter]="null"
  [(nzVisible)]="isGoodsVisible"
  [nzTitle]="'选择商品'"
  (nzOnCancel)="isGoodsVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="common-search-wrap">
        <div class="common-search-forms">
          <div class="common-form-item">
            <label class="common-search-label">商品</label>
            <div class="common-search-conrol">
              <input
                nz-input
                placeholder="请输入商品ID/名称"
                [(ngModel)]="modalSearchParams.name"
              />
            </div>
          </div>

          <div class="common-form-item">
            <label class="common-search-label">分类</label>
            <div class="common-search-conrol">
              <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择分类"
                [(ngModel)]="modalSearchParams.typeId">
                <nz-option
                  *ngFor="let option of classifyOptions"
                  [nzLabel]="option.name"
                  [nzValue]="option.id"
                ></nz-option>
              </nz-select>
            </div>
          </div>

          <div class="common-form-item">
            <label class="common-search-label">品牌</label>
            <div class="common-search-conrol">
              <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择品牌"
                [(ngModel)]="modalSearchParams.brandIds">
                <nz-option
                  *ngFor="let option of brandOptions"
                  [nzLabel]="option.name"
                  [nzValue]="option.id"
                ></nz-option>
              </nz-select>
            </div>
          </div>

          <div class="common-form-item">
            <div class="common-search-conrol">
              <button
                nz-button
                nzType="primary"
                [nzLoading]="modalTableParams.loading"
                (click)="queryModalGoodsData()"
              >查询</button>
              <button
                nz-button
                nzType="default"
                class="m-l-10"
                (click)="resetModalGoodsData()"
              >重置</button>
            </div>
          </div>
        </div>
      </div>

      <div class="m-t-15">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="modalTableParams.loading"
          [nzData]="modalTableParams.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="modalTableParams.total"
          [nzPageIndex]="modalTableParams.page"
          [nzPageSize]="modalTableParams.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center">商品ID</th>
              <th nzAlign="left">商品名称</th>
              <th nzAlign="center">商品分类</th>
              <th nzAlign="center">商品品牌</th>
              <th nzAlign="center">适用用户</th>
              <th nzAlign="center">商品状态</th>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <!-- 商品ID -->
              <td nzAlign="center">{{ data.id || '-' }}</td>
              <!-- 商品名称 -->
              <td nzAlign="left">{{ data.name || '-' }}</td>
              <!-- 商品分类 -->
              <td nzAlign="center">{{ data.typeName || '-' }}</td>
              <!-- 商品品牌 -->
              <td nzAlign="center">{{ data.brandName || '-' }}</td>
              <!-- 适用用户 -->
              <td nzAlign="center">
                <ng-container [ngSwitch]="data.userType">
                  <nz-tag *ngSwitchCase="0">通用</nz-tag>
                  <nz-tag nzColor="#87d068" *ngSwitchCase="1">C端</nz-tag>
                  <nz-tag nzColor="#2db7f5" *ngSwitchCase="2">B端</nz-tag>
                  <span *ngSwitchDefault>-</span>
                </ng-container>
              </td>
              <!-- 商品状态 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.status === 1 ? '#87d068' : '#F56C6C'}">
                  {{ data.status === 0 ? '无效' : data.status === 1 ? '上架' : '下架' }}
                </span>
              </td>
              <!-- 操作 -->
              <td nzAlign="center">
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  [disabled]="setOfCheckedId.has(data.code)"
                  (click)="selectedGoods(data)"
                >选择</button>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 选择更多商品 -->